<template>
  <div class="container">
    <div class="selection">
      <div class="left">
        <ul class="left_box">
          <li class="shopType"
              :class="{'active':index ==indexs}"
              v-for="(item, index) in shopType_list"
              :key="index"
              @click.prevent="change_shopType(item,item.children,index,item.name)">{{item.name}}</li>
        </ul>
      </div>
      <div class="right">
        <img v-if="imgUrl&&adv"
             @tap="ad_detail()"
             class="ad_image"
             :src="imgUrl+adv"
             alt>
        <ul class="nav">
          <li class="nav-item"
              v-for="(item, index) in type_list"
              :key="index"
              @click="select_nav(item)">
            <div class="image">
              <img :src="imgUrl+item.image"
                   alt
                   class="img">
            </div>
            <h4 class="nav-msg">{{item.name}}</h4>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      shopType_list: [],
      all_type: [],
      type_list: [],
      imgUrl: common.image_response,
      indexs: 0,
      adv: "",
      get_ads: {},
      arr: []
    };
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "全部分类"
    });
    this.getshopType();
  },
  methods: {
    //获取全部分类
    getshopType () {
      let text = [];
      common.mmk_Loading(0);
      common.fly_post("api/v4_2/shop_goods_category/list", "", response => {
        let res = response.data;
        // console.log(res)
        if (res.status_code == 0) {
          common.mmk_Loading(1);
          res.data.new_data.forEach(item => {
            //遍历其他分类组合成全部分类
            text.push(item);
          });
          this.all_type = text;
          // console.log(text)
          this.shopType_list = text;
          if (this.shopType_list[0].get_ads) {
            this.adv = this.shopType_list[0].get_ads.image;
            this.get_ads = this.shopType_list[0].get_ads
          }
          var i = "", x, j;
          for (x in text) {
            i = text[x]
            for (j in i.children) {
              if (i.children[j].id) {
                this.arr.push(i.children[j])
              }
            }
          }
          this.type_list = this.arr

        }
      });
    },
    //切换分类
    change_shopType (self, item, index, name) {
      this.adv = "";
      if (self.get_ads && self.get_ads !== null) {
        this.adv = self.get_ads.image;
        this.get_ads = self.get_ads
      }
      this.indexs = index;
      if (self.id == 0) { //点击到全部分类
        this.type_list = this.arr;
      } else {  //其他分类
        this.type_list = item;
      }

      wx.setNavigationBarTitle({
        title: name
      });
    },
    //跳转分类详情
    select_nav (e) {
      wx.navigateTo({
        url: `/pages/package_projects/shop_type_detail/main?id=${e.id}&title=${e.name}&type=2`
      });
    },
    //广告位跳转
    ad_detail () {
      common.to_detail(this.get_ads);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: rgba(251, 251, 251, 1);
  border-top: solid 1px #f3f4f6;
  display: flex;
  flex-direction: column;
  .title {
    line-height: 44px;
    font-size: 14px;
    font-family: "Medium";
    color: rgba(102, 102, 102, 1);
    position: relative;
    padding-left: 40px;
    .icon {
      width: 25px;
      height: 28px;
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      .image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .selection {
    flex: 1;
    width: 100%;
    max-height: 100%;
    background-color: #fff;
    display: flex;
    .left {
      height: 100%;
      flex: 1;
      box-shadow: 1px 0px 0px 0px rgba(204, 204, 204, 0.5);
      background-color: #f3f4f6;
      .left_box {
        background-color: #fff;
        text-align: center;
        width: 96%;
        overflow: auto;
        // padding-bottom: 20px;
        .shopType {
          background-color: #fff;
          margin: 20px 0;
          font-size: 14px;
          font-family: "Regular";
          color: rgba(136, 136, 136, 1);
          &.active {
            font-family: "Medium";
            color: rgba(246, 70, 101, 1);
            border-right: solid 2px rgba(246, 70, 101, 1);
          }
        }
      }
    }
    .right {
      height: 100%;
      flex: 2.5;
      position: relative;
      overflow: auto;
      margin-left: 8px;
      .nav {
        width: 100%;
        .nav-item {
          float: left;
          width: 28%;
          margin-top: 8px;
          padding: 0 6px;
          .image {
            width: 100%;
            height: 80px;
            .img {
              width: 100%;
              height: 100%;
            }
          }
          .nav-msg {
            width: 100%;
            font-size: 12px;
            font-family: "Regular";
            color: rgba(102, 102, 102, 1);
            text-align: center;
            overflow: hidden;
            height: 17px;
          }
        }
      }
      .ad_image {
        width: 93%;
        height: 86px;
        display: block;
        margin: 0 auto;
        margin-right: 13px;
        margin-top: 6px;
      }
    }
  }
}
</style>
